<template>
	<AFormItem :label="label" :required="required" :prop="prop" :error="error" ref="formItem" v-slot="{rule}">
		<input type="text" :disabled="rule.disabled||disabled" :value="value" @input="handleInput" @blur="handleBlur" @change="handleChange"/>
	</AFormItem>
</template>

<script>
	import AFormItem from './AFormItem.vue'
	export default {
		name: "AFormInput",
		components: {
			AFormItem
		},
		options: {
			multipleSlots: true,
			styleIsolation: "isolated",
			addGlobalClass: true,
			virtualHost: true,
		},
		props: {
			label: String, //展示名
			prop: String, //属性名
			required: Boolean, //是否必填
			error: String, //校验错误提示信息
			
			disabled: Boolean,
			value: String
		},
		data() {
			return {
				isErr: false, //校验报错
				msg: '', //报错信息展示
			}
		},
		methods:{
			handleInput(e){
				this.$emit('input', e.detail.value)
				
			},
			handleBlur(){
				this.$refs.formItem.triggerValidate('blur')
			},
			handleChange(){
				// this.$refs.formItem.triggerValidate('change')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.form-item {
		position: relative;
		padding-bottom: 30rpx;

		.error {
			color: red;
			position: absolute;
			bottom: 0;
			font-size: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
		}
	}
</style>